<template>
  <div>
    <el-table
      :data="queriedRecords"
      style="width: 100%"
      :height="tableHeight"
      @selection-change="handleSelectionChange"
      width="100%"
    >
      <el-table-column
        type="selection"
        width="50"
      >
      </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="scope">
          <result-detail :content="scope.row" />
        </template>
      </el-table-column>
      <el-table-column
        prop="number"
        label="#"
        align="center"
        width="60"
      ></el-table-column>
      <el-table-column
        prop="year"
        label="年度"
        align="center"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="cycle"
        label="周期"
        align="center"
        width="60"
      ></el-table-column>
      <el-table-column
        prop="office"
        label="科室"
        min-width="100"
      ></el-table-column>
      <el-table-column
        prop="title"
        label="练习名称"
        min-width="240"
      ></el-table-column>
      <el-table-column
        prop="traineeName"
        label="学员"
        align="center"
        width="80"
      ></el-table-column>
      <el-table-column
        label="通过"
        align="center"
        width="60"
      >
        <template slot-scope="scope">
          <i
            v-if="scope.row.pass=='是'"
            class="el-icon-success"
            style="font-size:18px;color:#67C23A"
          ></i>
          <i
            v-else
            class="el-icon-error"
            style="font-size:18px;color:#F56C6C"
          ></i>
        </template>
      </el-table-column>
      <el-table-column
        label="自评"
        align="center"
        width="60"
      >
        <template slot-scope="scope">
          <i
            v-if="scope.row.traineeComments.length == 0"
            class="el-icon-warning"
            style="font-size:18px;color:#E6A23C"
          ></i>
          <i
            v-else
            class="el-icon-success"
            style="font-size:18px;color:#67C23A"
          ></i>
        </template>
      </el-table-column>
      <el-table-column
        prop="evaluationScore"
        label="得分"
        width="60"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="failedSubjectsCount"
        label="加练科目"
        width="90"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.failedSubjectsCount>0">
            {{scope.row.failedSubjectsCount}}个科目
          </span>
          <span v-else>不需要</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="coachName"
        label="教员"
        align="center"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="trainingDate"
        label="培训日期"
        align="center"
        width="120"
      ></el-table-column>
    </el-table>
    <div style="margin-top:24px;display:flex;align-items:center;justify-content:center">
      <el-button
        size="small"
        type="primary"
        icon="el-icon-document"
        @click="doExport"
      >导出所选项目</el-button>
      <el-button
        size="small"
        type="primary"
        icon="el-icon-printer"
        @click="showPage"
      >打印所选项目</el-button>
    </div>
  </div>
</template>

<script>
  import resultDetail from "./resultDetail.vue"
  export default {
    name: "resultPanel",
    components: {
      resultDetail
    },
    data() {
      return {
        selectedContent: [],
      }
    },
    computed: {
      queriedRecords() {
        return this.$store.state.queriedRecords;
      },
      tableHeight() {
        if (this.dialogWidth == "600px") {
          // return this.$store.state.screenSize.height - 360 + "px";
          return "calc(100vh - 360px)";
        }
        // return this.$store.state.screenSize.height - 420 + "px";
        return "calc(100vh - 420px)";
      },
    },
    methods: {
      doExport() {
        this.$notify({
          message: '暂未开发',
          type: 'info',
        });
      },
      showPage() {
        if (this.selectedContent.length == 0) {
          this.$message.error("请选择要打印的记录");
          return;
        } else {
          this.$emit("printing", this.selectedContent);
        }
      },
      handleSelectionChange(val) {
        this.selectedContent = val;
      },
    },
  }
</script>

<style>

</style>